<!DOCTYPE HTML>
<html>
<head>
       <title>bootstrap网页</title>
	   <meta charset="utf-8">
	   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	   <!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="js/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
       <div class="container">
	           <table id="test" class="table table-bordered table-condensed">
			        <tr id="1" pId="0" class="0"><td>AAAAA</td></tr>
				    <tr id="2" pId="0" class="0"><td>AAAAA</td></tr>
					<tr id="3" pId="2" class="2"><td>BBBBB</td></tr>
					<tr id="4" pId="2" class="2"><td>BBBBB</td></tr>
				    <tr id="5" pId="0" class="0"><td>AAAAA</td></tr>
					<tr id="6" pId="0" class="0"><td>AAAAA</td></tr>
					<tr id="7" pId="0" class="0"><td>AAAAA</td></tr>
				    <tr id="8" pId="7" class="7"><td>BBBBB</td></tr>
					<tr id="9" pId="7" class="7"><td>BBBBB</td></tr>
					<tr id="10" pId="7" class="7"><td>BBBBB</td></tr>
				    <tr id="11" pId="0" class="0"><td>AAAAA</td></tr>
					<tr id="12" pId="11" class="11"><td>BBBBB</td></tr>
			   </table>
	   </div>


<script>
  $(function(){
       initTreeTable("test");


       function initTreeTable(id){
	      var $treetable = $("#"+id);
		  var controller = "<span class='controller controller-normal' style='display:block; float:left;'></span>";
		  var space = "<span class='space'></span>";
          $treetable.find("tr[class!='0']").hide();
          $treetable.find("tr[class='0']").each(function(){
		      var cid = $(this).attr("id");
		      var childlen = $treetable.find("."+cid).length;
			  if(childlen>0){
			       $(this).find("td:first").prepend(controller);
				    $treetable.find("."+cid).find("td:first").prepend(space).prepend(space);
			  }else{
			      $(this).find("td:first").prepend(space);
			  }
		      
		  });

		  $treetable.find(".controller").click(function(){
		           var pid= $(this).parent().parent().attr("id");
				   $treetable.find("."+pid).toggle();
				   if($treetable.find("."+pid).is(":visible")){
				      $(this).attr("class",$(this).attr("class").replace("normal","expand"));
				   }else{
				      $(this).attr("class",$(this).attr("class").replace("expand","normal"));
				   }
		  });
		   $treetable.find(".controller").mouseenter(function(){
				   var css = $(this).attr("class")+"-active";
				   $(this).attr("class",css);
		  });
		   $treetable.find(".controller").mouseleave(function(){
				   var css = $(this).attr("class");
				   css = css.substring(0, css.lastIndexOf('-'));
				   $(this).attr("class",css);
		  });
	   } 
  });
</script>
<style>
        .space{
		  margin-left :16px;
		}
		.controller{
		    background-image:url(img/allbgs.png);  
			background-repeat:no  
		}
		.controller-normal{
		    width:16px;  
			height:16px;  
			background-position:-16px 0px  
		}
		.controller-normal-active{
		    width:16px;  
			height:16px;  
			background-position:-48px 0px  
		}
		.controller-expand{
		    width:16px;  
			height:16px;  
			background-position:0px 0px  
		}
		.controller-expand-active{
		    width:16px;  
			height:16px;  
			background-position:-32px 0px  
		}
</style>
</body>
</html>
